<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="show"
      width="60%"
      :before-close="handleClose"
    >
      <div style="display: flex; align-items: center; padding: 0 0 2%">
        <span style="width: 6%">标题 :</span>
        <el-input style="margin-left: auto" v-model="form.title" />
      </div>
      <div style="display: flex; align-items: center; padding: 0 0 2%">
        <span style="width: 6%">发送人 :</span>
        <el-input
          style="margin-left: auto"
          :disabled="true"
          v-model="form.author"
        />
      </div>
      <div style="border: 1px solid #ccc">
        <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editor"
          :defaultConfig="toolbarConfig"
          :mode="mode"
        />
        <Editor
          style="height: 500px; overflow-y: hidden"
          v-model="form.html"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="onCreated"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import moment from "moment";
export default {
  props: ["show", "title", "getForm"],
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null,
      toolbarConfig: {
        toolbarKeys: [
          "headerSelect",
          "italic",
          "color",
          "|",
          "fontSize",
          {
            key: "group-justify",
            title: "对齐",
            iconSvg:
              '<svg viewBox="0 0 1024 1024"><path d="M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>',
            menuKeys: [
              "justifyLeft",
              "justifyRight",
              "justifyCenter",
              "justifyJustify",
            ],
          },
          {
            key: "group-indent",
            title: "缩进",
            iconSvg:
              '<svg viewBox="0 0 1024 1024"><path d="M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z"></path></svg>',
            menuKeys: ["indent", "delIndent"],
          },
        ],
      },
      editorConfig: { placeholder: "请输入内容..." },
      mode: "default", // or 'simple'
      form: {
        title: "",
        html: "",
        author: "超级管理员",
        date: "",
        status: "", //0 是未审核 1是已审核
      },
    };
  },
  mounted() {
    this.onCreated();
  },
  watch: {
    getForm(newV) {
      console.log(newV);
      if (newV) {
        this.form = Object.assign(this.form, this.getForm);
      }
    },
  },
  methods: {
    handleClose() {
      this.clear();
      this.$emit("close", true);
    },
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    //上传
    submit() {
      this.form.date = moment().format("YYYY-MM-DD");
      if (this.title == "通知-新增") {
        this.$http.post("/postNotice", this.form).then((res) => {
          if (res.code == 200) {
            this.$emit("refresh", true);
            this.clear();
          }
        });
      } else {
        console.log("编辑");
        console.log(this.form);
        this.$http.post("/updateNotice", this.form).then((res) => {
          if (res.code == 200) {
            this.$message.success(res.msg);
            this.handleClose();
          } else {
            this.$message.error(res.msg);
          }
        });
      }
    },
    //清空
    clear() {
      for (let key in this.form) {
        if (key == "author") {
          this.form[key] = "超级管理员";
        } else {
          this.form[key] = "";
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  align-items: center;
}
</style>